<script setup>
import userStore from "./userStore";
import goods from "./goods";
import { toRefs, reactive } from "vue";
import { storeToRefs } from "./storeToRefs";
const store = userStore();
const goodstore = goods(); //正确
const stats = reactive({
  name: "wysh",
  age: 20,
});
const wers = reactive({ value: 20 });
console.log(toRefs(stats), "96523");
console.log(Object.assign(wers, toRefs(stats)), "000");
console.log(Object.assign(wers, { tem: "ikk" }), "11111");
//监听一个store中state的数据变化
store.$subscribe((storeInFo, state) => {
  console.log(storeInFo, state);
});
//调用actions中的方法会执行$onAction方法
store.$onAction(function ({ after, onError }) {
  console.log("actions方法执行之前触发", store.count);
  after((res) => {
    console.log("actions方法执行之后触发", store.count, res);
  });
  after((res) => {
    console.log("actions方法执行之后触发", store.count, res);
  });
  //err是调用actions中的方法发生错误的原因
  onError((err) => {
    console.log("onError11", err);
  });
});
const handleClickss = () => {
  goodstore.age++;
  store
    .handleClick(3)
    .then((val) => {
      console.log(val);
    })
    .catch((err) => {
      console.log(err, "0000");
    });
};
//停止所有响应式(修改数据页面还是会更新的,但是停止了computed,watch,watchEffect的效果)
const termination = () => {
  console.log(store, 4000);
  store._p._e.stop();
  store._p._s.clear();
};
// const { count, doubleAge } = storeToRefs(store); //storeToRefs的用法
</script>

<template>
<div>
 {{ store.count }}/{{ store.doubleAge }}/
  {{ goodstore.age }} /{{ store.age }}
</div>
  
 
  <button @click="store.$patch(state => (state.age = 1500))">修改状态0</button>
  <button @click="handleClickss">修改状态1</button>
  <!-- 修改状态的几种方式 -->
  <!-- 1. store.age=300 -->
  <!-- 2. store.$patch({count:100}) 有局限性，使用数组的7个方法修改数组，不能使用这个 -->
  <!-- 3. store.$patch((state) => (state.count = 100)) 推荐使用这个 -->
  <!-- 4. store.$state={count:100000,age:600}  age中的600不会显示到页面中(因为获取值的target和设置值的target不一样)-->
  <button @click="store.$state = { count: 100000, age: 600 }">修改状态2</button>
  <!-- 重置到初始的状态 -->
  <button @click="store.$reset">重置状态</button>
  <!-- 卸载响应式使用的场景很少 -->
  <button @click="store.$dispose">卸载响应式</button>
  <!-- 卸载所有响应式，使用的场景几乎不用 -->
  <button @click="termination">终止所有</button>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
